﻿
@{
    ViewBag.Title = "监控统计";
}

<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>系统运行监控</h2>
        <ol class="breadcrumb">
            @*<li>
                <a href="@Url.Action("Dashboard_1", "Dashboards")">Home</a>
            </li>
            <li>
                <a>Graphs</a>
            </li>*@
            <li class="active">
                <strong>系统监控</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">

    </div>
</div>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>今日业务统计</h5>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas id="barChart1" height="210"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>累计业务统计</h5>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas id="barChart" height="210"></canvas>
                    </div>
                </div>
            </div>
            @*<div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Bar Chart Example </h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="#">Config option 1</a>
                                </li>
                                <li>
                                    <a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div id="morris-bar-chart"></div>
                    </div>
                </div>*@
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>各项业务数量 </h5>
                </div>
                <div class="ibox-content">
                    <div>
                        <canvas id="doughnutChart" height="237"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>教师和学生借书量</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#">Config option 1</a>
                            </li>
                            <li>
                                <a href="#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="morris-donut-chart"></div>
                </div>
            </div>
        </div>
    </div>
    @*<div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Simple one line Example </h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="#">Config option 1</a>
                            </li>
                            <li>
                                <a href="#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="morris-one-line-chart"></div>
                </div>
            </div>
        </div>
    </div>*@


</div>

@section Styles {
    @Styles.Render("~/plugins/morrisStyles")
    @Scripts.Render("~/plugins/chartjs")

}

@section Scripts {
    @Scripts.Render("~/plugins/morris")

    <script type="text/javascript">
        $(document).ready(function () {
            //var ctx = document.getElementById("lineChart").getContext("2d");
            //new Chart(ctx, { type: 'line', data: lineData, options: lineOptions });
            var list = "@ViewBag.departmentInfosXi";
            var list2 = list.split(",");
            list2.pop();
            var listJie = "@ViewBag.departmentInfosJie";
            var listJie2 = listJie.split(",");
            listJie2.pop();
            var listXu = "@ViewBag.departmentInfosXu";
            var listXu2 = listXu.split(",");
            listXu2.pop();
            var StatusName = "@ViewBag.statusName";
            var StatusName2 = StatusName.split(",");
            StatusName2.pop();
            var StatusNum = "@ViewBag.status1";
            var StatusNum2 = StatusNum.split(",");
            StatusNum2.pop();
            var barData = {

                labels: list2,
                //labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "借阅数量",
                        backgroundColor: 'rgba(220, 220, 220, 0.5)',
                        pointBorderColor: "#fff",
                        data: listJie2
                    },
                    {
                        label: "续借数量",
                        backgroundColor: 'rgba(26,179,148,0.5)',
                        borderColor: "rgba(26,179,148,0.7)",
                        pointBackgroundColor: "rgba(26,179,148,1)",
                        pointBorderColor: "#fff",
                        data: listXu2
                    }
                ]
            };

            var barOptions = {
                responsive: true
            };
            var ctx2 = document.getElementById("barChart").getContext("2d");
            new Chart(ctx2, { type: 'bar', data: barData, options: barOptions });


            var barData1 = {

                labels: list2,
                //labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [
                    {
                        label: "今日借阅",
                        backgroundColor: 'rgba(220, 220, 220, 0.5)',
                        pointBorderColor: "#fff",
                        data: [@ViewBag.jinriJie]
                    },
                    {
                        label: "今日续借",
                        backgroundColor: 'rgba(150, 150, 150, 0.5)',
                        pointBorderColor: "#fff",
                        data: [@ViewBag.jinriXu]
                    },
                    {
                        label: "今日还书",
                        backgroundColor: 'rgba(26,179,148,0.5)',
                        borderColor: "rgba(26,179,148,0.7)",
                        pointBackgroundColor: "rgba(26,179,148,1)",
                        pointBorderColor: "#fff",
                        data: [@ViewBag.jinriHuan]
                    }
                ]
            };

            var barOptions1 = {
                responsive: true
            };
            var ctx21= document.getElementById("barChart1").getContext("2d");
            new Chart(ctx21, { type: 'bar', data: barData1, options: barOptions1 });

             var doughnutData = {
                labels: StatusName2,
                datasets: [{
                    data: StatusNum2,
                    backgroundColor: ["#a3e1d4", "#dedede", "#b5b8cf"]
                }]
            };


            var doughnutOptions = {
                responsive: true
            };


            var ctx4 = document.getElementById("doughnutChart").getContext("2d");
            new Chart(ctx4, { type: 'doughnut', data: doughnutData, options: doughnutOptions });



            //Morris.Line({
            //    element: 'morris-one-line-chart',
            //    data: [
            //        { year: '2008', value: 5 },
            //        { year: '2009', value: 10 },
            //        { year: '2010', value: 8 },
            //        { year: '2011', value: 22 },
            //        { year: '2012', value: 8 },
            //        { year: '2014', value: 10 },
            //        { year: '2015', value: 5 }
            //    ],
            //    xkey: 'year',
            //    ykeys: ['value'],
            //    resize: true,
            //    lineWidth: 4,
            //    labels: ['Value'],
            //    lineColors: ['#1ab394'],
            //    pointSize: 5,
            //});

            //Morris.Area({
            //    element: 'morris-area-chart',
            //    data: [{ period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647 },
            //        { period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441 },
            //        { period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501 },
            //        { period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689 },
            //        { period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293 },
            //        { period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881 },
            //        { period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588 },
            //        { period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175 },
            //        { period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028 },
            //        { period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791 }],
            //    xkey: 'period',
            //    ykeys: ['iphone', 'ipad', 'itouch'],
            //    labels: ['iPhone', 'iPad', 'iPod Touch'],
            //    pointSize: 2,
            //    hideHover: 'auto',
            //    resize: true,
            //    lineColors: ['#87d6c6', '#54cdb4', '#1ab394'],
            //    lineWidth: 2,
            //    pointSize: 1,
            //});

            Morris.Donut({
                element: 'morris-donut-chart',
                data: [{ label: "学生借书量", value: @ViewBag.stuNum },
                    { label: "教师借书量", value: @ViewBag.TeaNum },
                    /*{ label: "Mail-Order Sales", value: 20 }*/],
                resize: true,
                colors: ['#87d6c6', '#54cdb4', '#1ab394'],
            });

            //Morris.Bar({
            //    element: 'morris-bar-chart',
            //    data: [{ y: '2006', a: 60, b: 50 },
            //        { y: '2007', a: 75, b: 65 },
            //        { y: '2008', a: 50, b: 40 },
            //        { y: '2009', a: 75, b: 65 },
            //        { y: '2010', a: 50, b: 40 },
            //        { y: '2011', a: 75, b: 65 },
            //        { y: '2012', a: 100, b: 90 }],
            //    xkey: 'y',
            //    ykeys: ['a', 'b'],
            //    labels: ['Series A', 'Series B'],
            //    hideHover: 'auto',
            //    resize: true,
            //    barColors: ['#1ab394', '#cacaca'],
            //});

            //Morris.Line({
            //    element: 'morris-line-chart',
            //    data: [{ y: '2006', a: 100, b: 90 },
            //        { y: '2007', a: 75, b: 65 },
            //        { y: '2008', a: 50, b: 40 },
            //        { y: '2009', a: 75, b: 65 },
            //        { y: '2010', a: 50, b: 40 },
            //        { y: '2011', a: 75, b: 65 },
            //        { y: '2012', a: 100, b: 90 }],
            //    xkey: 'y',
            //    ykeys: ['a', 'b'],
            //    labels: ['Series A', 'Series B'],
            //    hideHover: 'auto',
            //    resize: true,
            //    lineColors: ['#54cdb4', '#1ab394'],
            //});

        });
    </script>
}

